<template>
  <div class="p-3">
    <el-row :gutter="12">
      <el-col :span="12" class="mb-3">
        <el-row :gutter="12">
          <el-col :span="24" class="mb-3 text-2xl">
            <el-card :body-style="{ padding: '30px' }"
              >欢迎来到体院运动队管理系统！
            </el-card>
          </el-col>
          <el-col :span="24">
            <el-card><div id="Attendance"></div> </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="12">
          <el-col :span="8" class="mb-3">
            <el-card :body-style="{ padding: '20px' }">
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-image
                    style="width: 64px; height: 64px"
                    :src="imgTeacher"
                    fit="fill"
                  />
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-statistic :value="teacherCounts">
                    <template #title>
                      <span class="text-xl">教师人数</span>
                    </template>
                  </el-statistic>
                </el-col>
              </el-row>

              <!-- card body -->
            </el-card>

            <!-- <div
              class="bg-blue-500 text-light-300 p-3 text-center text-3xl rounded"
            >
              教师人数:10
            </div> -->
          </el-col>
          <el-col :span="8" class="mb-3">
            <el-card :body-style="{ padding: '20px' }">
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-image
                    style="width: 64px; height: 64px"
                    :src="imgStudent"
                    fit="fill"
                  />
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-statistic :value="studentCounts">
                    <template #title>
                      <span class="text-xl">学生人数</span>
                    </template>
                  </el-statistic>
                </el-col>
              </el-row>

              <!-- card body -->
            </el-card>
            <!-- <div
              class="bg-red-500 text-light-300 p-3 text-center text-3xl rounded"
            >
              学生人数:10
            </div> -->
          </el-col>
          <el-col :span="8" class="mb-3">
            <el-card :body-style="{ padding: '20px' }">
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-image
                    style="width: 64px; height: 64px"
                    :src="imgTeam"
                    fit="fill"
                  />
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-statistic :value="teamCounts">
                    <template #title>
                      <span class="text-xl">运动队数</span>
                    </template>
                  </el-statistic>
                </el-col>
              </el-row>

              <!-- card body -->
            </el-card>
          </el-col>
        </el-row>

        <el-card><div id="Awards"></div> </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import imgStudent from "@/assets/student.png";
import imgTeacher from "@/assets/teacher.png";
import imgTeam from "@/assets/team.png";
import { getNumsList, getAwardsList, getRecordsList } from "@/api/welcome.js";

//声明周期函数，自动执行初始化
onMounted(async () => {
  const { data } = await getNumsList();
  studentCounts.value = data.studentCounts;
  teacherCounts.value = data.teacherCounts;
  teamCounts.value = data.teamCounts;
  init();
});

const studentCounts = ref(0);
const teacherCounts = ref(0);
const teamCounts = ref(0);

//初始化函数
async function init() {
  // 基于准备好的dom，初始化echarts实例
  let AttendanceChart = echarts.init(document.getElementById("Attendance"));
  const { data: recordsList } = await getRecordsList();
  console.log(`output->recordsList`, recordsList);
  let AttendanceSource = {
    legend: [],
    xAxis: [],
    series: [
      {
        name: "缺勤人数",
        type: "line",
        stack: "Total",
        data: [],
      },
      {
        name: "出勤人数",
        type: "line",
        stack: "Total",
        data: [],
      },
      {
        name: "早退人数",
        type: "line",
        stack: "Total",
        data: [],
      },
      {
        name: "迟到人数",
        type: "line",
        stack: "Total",
        data: [],
      },
      {
        name: "请假人数",
        type: "line",
        stack: "Total",
        data: [],
      },
    ],
  };
  for (let index = 0; index < recordsList.length; index++) {
    const element = recordsList[index];
    AttendanceSource.xAxis.push(element.trainDate);
    AttendanceSource.series[0].data.push(element.absentCount);
    AttendanceSource.series[1].data.push(element.checkInCount);
    AttendanceSource.series[2].data.push(element.earlyLeaveCount);
    AttendanceSource.series[3].data.push(element.lateCount);
    AttendanceSource.series[4].data.push(element.leaveCount);
  }
  // 绘制图表
  let Attendance = {
    title: {
      text: "考勤图表",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["缺勤人数", "出勤人数", "早退人数", "迟到人数", "请假人数"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: AttendanceSource.xAxis,
    },
    yAxis: {
      type: "value",
    },
    series: AttendanceSource.series,
  };
  // 渲染图表
  AttendanceChart.setOption(Attendance);

  let AwardsChart = echarts.init(document.getElementById("Awards"));
  let AwardsSource = [["年份"], ["总数"]];
  const { data: awardsList } = await getAwardsList();
  // console.log(`output->awardsList`, awardsList);
  for (let index = 0; index < awardsList.length; index++) {
    const element = awardsList[index];
    AwardsSource[0].push(element.year);
    AwardsSource[1].push(element.total);
  }
  console.log(`output->AwardsSource`, AwardsSource);
  let Awards = {
    title: {
      text: "奖项统计图表",
    },
    legend: {},
    tooltip: {
      trigger: "axis",
      showContent: false,
    },
    dataset: {
      source: AwardsSource,
    },
    xAxis: { type: "category" },
    yAxis: { gridIndex: 0 },
    grid: { top: "55%" },
    series: [
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "pie",
        id: "pie",
        radius: "30%",
        center: ["50%", "25%"],
        emphasis: {
          focus: "self",
        },
        label: {
          formatter: "{b}: {@2023} ({d}%)",
        },
        encode: {
          itemName: "product",
          value: "2021",
          tooltip: "2021",
        },
      },
    ],
  };
  // 渲染图表
  AwardsChart.setOption(Awards);
}
</script>

<style scoped>
/* 样式这里要设置长宽，不然显示不出来 */
#Attendance {
  width: 100%;
  height: 60vh;
}
#Awards {
  width: 100%;
  height: 60vh;
}
</style>
